<template>
    <div>
      <img @click="show()" src="../../../static/XSDH/分享.png" alt="">
      <!--遮罩层-->
      <div class="zzc" @touchmove.prevent v-if="show"  >
        <!--分享区-->
        <div class="fx" >
          <div class="fx-wrap">
            <div class="fx-logo" v-for="item in fx">
              <div class="logo">
                <img :src="item.url1" alt="">
              </div>
              <p>{{item.text}}</p>
            </div>
          </div>
          <button @click="hide()" class="fx-btn">取消</button>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "Fenxiang",
      data(){
          return{
            show:false,
            fx:[
              {url1:require('../../../static/logo/pengyouquan.png'),text:'微信朋友圈'},
              {url1:require('../../../static/logo/weixin.png'),text:'微信好友'},
              {url1:require('../../../static/logo/QQ.png'),text:'QQ好友'},
              {url1:require('../../../static/logo/QQkongjian.png'),text:'QQ空间'},
              {url1:require('../../../static/logo/weibo.png'),text:'微博'},
              {url1:require('../../../static/logo/fuzhilianjie.png'),text:'复制链接'}
            ]
          }
      },
      methods:{
        show(){
          this.show=true;
        },
        hide(){
          this.show=false;
        },
      }
    }
</script>

<style scoped>
  img{
    width: 3rem;
    height: 3rem;
  }
  .zzc{
    position: fixed;
    left: 0;
    top: 0;
    width: 72rem;
    height: 200rem;
    background: rgba(0,0,0,0.4);
    z-index: 600;
    overflow: hidden;
  }
  .fx{
    position: fixed;
    bottom: 0;
    width: 72rem;
    height: 45rem;
    background: #fff;
    text-align: center;
    z-index: 666;
  }
  .fx-wrap{
    width: 64rem;
    height: 31rem;
    padding:3rem 4rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .fx .fx-logo{
    width: 17rem;
    height: 15rem;
  }
  .fx-logo .logo{
    width: 7rem;
    height: 7rem;
    padding: 1.5rem 5rem;
  }
  .fx-logo .logo img{
    width: 100%;
    height: 100%;
    vertical-align: middle;
  }
  .fx-logo p{
    width: 100%;
    height: 5rem;
    font-size: 2.4rem;
    color: #333333;
  }

  .fx-btn{
    width: 17rem;
    height: 5rem;
    font-size: 2.4rem;
    color: #fff;
    background: #e53e42;
    border-radius: .5rem;

  }
</style>
